import {Input, Space, Button, Image, Checkbox, Divider} from "antd";
import styles from "./index.module.scss";
import {useTheme} from "@/contexts/ThemeContext.tsx";
import ThemeButton from "@/components/theme/ThemeButton.tsx";
import {GithubOutlined, GoogleOutlined, QqOutlined, WechatOutlined} from "@ant-design/icons";


const Login = () => {
    const {theme} = useTheme()
    const bgColor = theme === "light" ? "linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%)" : "linear-gradient(-20deg, #2b5876 0%, #4e4376 100%)"
    const userChange = (value: string, name: string) => {
        console.log(value, name);
    };
    const gotoLogin = async () => {


    };

    return (
        <div className={styles.loginPage} style={{backgroundImage: bgColor}}>
            {/*header*/}
            <div className={styles.header}>
                <div className={styles.logo}>
                    <Image width={24} preview={false} src="../src/assets/logo-v1.png"/>
                    <h1>REACT_ADMIN</h1>
                </div>
                <ThemeButton></ThemeButton>
            </div>
            {/*body*/}
            <div className={styles.loginBox}>
                {/* 标题部分 */}
                <div className={styles.title}>
                    <h1>REACT_ADMIN</h1>
                </div>
                {/* 表单部分 */}
                <div className={styles.form}>
                    <Space direction="vertical" size="large" style={{display: "flex"}}>
                        <Input
                            placeholder="用户名"
                            onChange={(e) => userChange(e.target.value, "name")}
                        />

                        <Input.Password
                            placeholder="密码"
                            onChange={(e) => userChange(e.target.value, "password")}
                        />
                        <div className={styles.captchaBox}>
                            {/*<Input*/}
                            {/*    placeholder="验证码"*/}
                            {/*    onChange={(e) => userChange(e.target.value, "code")}*/}
                            {/*/>*/}
                            {/*<canvas*/}
                            {/*    id="code-canvas"*/}
                            {/*    width="100"*/}
                            {/*    height="32"*/}
                            {/*     onClick={onRefresh}*/}
                            {/*    style={{cursor: "pointer"}}*/}
                            {/*></canvas>*/}

                            {/*   滑动验证*/}
                            <Button type='primary' block> 滑动验证模块</Button>
                        </div>

                        <div className={styles.pwdInfo}>
                            <Checkbox>记住账号</Checkbox>
                            <div className={styles.forgetPassword}>忘记密码?</div>
                        </div>
                        <Button
                            type="primary"
                            className="loginBtn"
                            block
                            onClick={gotoLogin}
                        >
                            登录
                        </Button>
                        <div className={styles.otherBox}>
                            <Button>
                                手机号登录
                            </Button>

                            <Button>
                                扫码登录
                            </Button>
                        </div>

                        <div className={styles.otherTitle}>
                            <Divider>其他登录方式</Divider>
                            <div className={styles.otherTitleBox}>
                                <Button shape="circle" icon={<QqOutlined />}/>
                                <Button shape="circle" icon={<WechatOutlined/>}/>
                                <Button shape="circle" icon={<GithubOutlined/>}/>
                                <Button shape="circle" icon={<GoogleOutlined/>}/>
                            </div>

                        </div>
                        <div className={styles.toRegister}>
                            还没有账号？<span >创建账号</span>
                        </div>
                    </Space>

                </div>
            </div>


        </div>
    );
};


export default Login;